<template>
	<div class="headings">
		<ul>
			<li>
				<router-link to="/indexOne/sonThree">
					<div class="headings_img_box">
						<div class="headings_img"><img src="../images/v5.png" /></div>
					</div>
					<div class="headings_content">今日推荐</div>
				</router-link>
			</li>
			<li>
				<router-link to="/indexOne/sonfour">
					<div class="headings_img_box">
						<div class="headings_img"><img src="../images/dt.png" /></div>
					</div>
					<div class="headings_content">私人电台</div>
				</router-link>
			</li>
			<li>
				<router-link to="/songListB3">
					<div class="headings_img_box">
						<div class="headings_img"><img src="../images/yiny.png" /></div>
					</div>
					<div class="headings_content">新歌首发</div>
				</router-link>
			</li>
			<li>
				<router-link to="/indexOne/sonTwo">
					<div class="headings_img_box">
						<div class="headings_img"><img src="../images/re1n.png" /></div>
					</div>
					<div class="headings_content">全部歌手</div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "headings",
		data() {
			return {

			}
		},
		components: {
			//			ShufflingFigures
		}
	}
</script>

<style scoped lang="scss">
	.headings {
		width: 93%;
		margin: 0 auto;
		ul {
			width: 100%;
			display: flex;
			justify-content: space-between;
			li {
				padding: 5% 0 3.6% 0;
				width: 25%;
				.headings_img_box {
					margin: 0 auto;
					border-radius: 50%;
					border: 1px solid #ff8eae;
					padding-top: 62%;
					width: 63%;
					position: relative;
					.headings_img {
						position: absolute;
						top: 0;
						left: 0;
						width: 66%;
						top: 50%;
						left: 50%;
						height: 46%;
						transform: translate(-50%, -50%);
						margin: 0 auto;
						img {
							/*width: 100%;*/
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							margin: 0 auto;
						}
					}
				}
				.headings_content {
					font-weight: 600;
					text-align: center;
					color: #010101;
					font-size: 12px;
					line-height: 14px;
					margin-top: 6%;
				}
			}
		}
	}
</style>